<!DOCTYPE html>
<html>
	<head>
		<script src="__STATIC__/static/lib/layui/layui.js" charset="utf-8"></script>
		<link rel="stylesheet" href="__STATIC__/static/lib/layui/css/layui.css">
		{include file='index/meta'}
		<style type="text/css">
			.form-content {
				width: 1000px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		{include file='index/header'}
		<div class="form-content">
			<form class="layui-form" action="" lay-filter="formTest">
				<div class="layui-form-item">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-inline">
						<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">标题</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-inline">
						<input type="text" name="phone" required lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">电话</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-inline">
						<input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">邮箱</div>
				</div>
				{eq name="$Think.config.template.captcha" value="true"}
				<div class="layui-form-item">
					<label class="layui-form-label">验证码</label>
					<div class="layui-input-inline">
						<input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-word-aux" id="captcha">
						<img src="{:captcha_src()}" style="border: 1px solid #eee;" alt="" height="35">
					</div>
				</div>
				{/eq}
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-block">
						<textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
			{gbook limit="10" cache="3600" order="id asc" pagesize="2"}
				{volist name="data" id="v"}
					<h2>
						{$v.title}
					</h2>
				{/volist}
				{$page|raw}
			{/gbook}
		</div>

		<script>
			//Demo
			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(obj) {
					$.post("{:url('admin/Guestbook/add')}", obj.field, function(res) {
						if (res.status == 1) {
							layer.msg('添加成功', {
								icon: 1,
								time: 1000
							}, function() {
								form.val("formTest", {
									"title": "",
									"phone": "",
									"email": '',
									"captcha": '',
									"content": ''
								});
							});

						} else {
							layer.msg(res.message)
						}
					})
					return false;
				});
			});
			$("#captcha img").click(function(event) {
				this.src = "{:captcha_src()}?" + Math.random();
			});
		</script>
	</body>
</html>
